<style scoped>
.isEnabled{
  border: 1px solid #f8ac59;
  border-radius: 5px;
  background-color: #f8ac59;
    color: #FFFFFF;
    display: inline-block;
    width: 50px;
    height: 30px;
}
.notEnabled{
  border: 1px solid #d1dade;
  border-radius: 5px;
  background-color: #d1dade;
    color: #FFFFFF;
    display: inline-block;
    width: 50px;
    height: 30px;
    color: #5e5e5e;
}
.is-center{
  font-size: 19px !important;
}
.barCode{
  border: 1px solid #337ab7;
  border-radius: 5px;
  background-color: #337ab7;
    color: #FFFFFF;
    display: inline-block;
    width: auto;
    height: 30px;
    color: #FFFFFF;
}
.layer-custom .layui-layer-dialog{
  width: 400px !important;
  height: 280px !important;
  left: 320px !important;
  
}
.layer-custom .layui-layer-title{
  font-size: 30px !important;
  height: 60px;
  line-height: 60px;
}
.layer-custom .layui-layer-content{
  margin-top: 20px;
  padding: 52px !important;
  font-size: 28px !important;
}

.layer-custom .layui-layer-btn a{
  height: 50px !important;
  font-size: 25px !important;
  line-height: 50px !important;
}
</style>
<template>
  <!--页面主体，内容区域-->
  <div class="content">
    <div class="body">
      <div class="frame">
        <div class="myReagentArea">
          <mu-container style="min-width: 99% !important;">
            <mu-card id="myCard" style="width: 100%;  margin: 0 auto;border-radius:10px !important;">
              <mu-card-title title="用户列表" sub-title=""></mu-card-title>
              <mu-card-text>
                <mu-container>
                  <mu-paper :z-depth="1">
                    <mu-data-table id="myDataTable" selectable select-all :selects.sync="selects" fit :columns="columns"
                      :sort.sync="sort" @sort-change="handleSortChange" :data="list">
                      <template slot-scope="scope">
                        <td>{{scope.row.Account}}</td>
                        <td class="is-center">{{scope.row.RoleName}}</td>
                        <td class="is-center">{{scope.row.RealName}}</td>
                        <td class="is-center"><div class="barCode">{{scope.row.BarCode}}</div></td>
                        <td class="is-center" v-if="scope.row.IsEnabled"><div class="isEnabled">{{scope.row.IsEnabled ? '正常': '禁用'}}</div></td>
                        <td class="is-center" v-else><div class="notEnabled">{{scope.row.IsEnabled ? '正常': '禁用'}}</div></td>
                        <td class="is-center">{{formatSqlTime(scope.row.CreateDate)}}</td>
                      </template>
                    </mu-data-table>
                  </mu-paper>
                </mu-container>
                <mu-container style="min-width: 100% !important">
                  <mu-flex style="margin: 20px 0;">
                    <mu-pagination id="myDrugPage" raised :total="totalCount" @change="userListPageChange" :page-size="pageSize" :page-count="6" :current.sync="current"></mu-pagination>
                  </mu-flex>
                </mu-container>
              </mu-card-text>
            </mu-card>
          </mu-container>
        </div>
        
      </div>
      <button class="btn btn-danger btn-lg list-btn-bottom-right" style="left: 280px !important"  type="button" @click="addUser">添加用户</button>
      <button class="btn btn-danger btn-lg list-btn-bottom-right" style="left: 480px !important"  type="button" @click="deleteUser">删除用户</button>
      <button class="btn btn-danger btn-lg list-btn-bottom-right" style="left: 680px !important" @click="btnAddFace" type="button">录入人脸</button>
      <button class="btn btn-danger btn-lg list-btn-bottom-right" @click="btnBackClickEvent" type="button">返回</button>
    </div>
  </div>

</template>
<script>
  export default {
    extends: extend,
    name: "userManagement",
    data: function () {
      return {
        current: 1,
        pageSize: 8,
        totalCount:0,
        selects: [],
        sort: {
          name: '',
          order: 'asc'
        },
        columns: [{
            title: '工号',
            width: 150,
            name: 'Account'
          },
          {
            title: '角色',
            name: 'RoleName',
            width: 126,
            align: 'center',
            sortable: true
          },
          {
            title: '姓名',
            name: 'RealName',
            width: 150,
            align: 'center',
            sortable: true
          },
          {
            title: '条码',
            name: 'BarCode',
            width: 126,
            align: 'center',
            sortable: true
          },
          {
            title: '状态',
            name: 'IsEnabled',
            width: 100,
            align: 'center',
            sortable: true
          },
          {
            title: '创建时间',
            name: 'CreateDate',
            width: 280,
            align: 'center',
            sortable: true
          }
        ],
        list: [],
        pageTitle: "用户管理",
        countDownTimerMax: 60,
        useReagentList: [],
        myRecordList: [],

      };
    },
    computed: {

    },
    methods: {
      handleSortChange({
        name,
        order
      }) {
        this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
      },
      removeSelect(selectIndex) {
        const index = this.selects.indexOf(selectIndex);
        this.selects.splice(index, 1);
      },
      userListPageChange: function () {

        this.layerIndex = layer.load(2);
        P_User.getUserList(this.$parent.currentInfo.CustomerId,this.current, this.pageSize);

      },
      btnAddFace:function(){
        //alert(JSON.stringify(this.selects));
        if(this.selects.length==0)
        {
          this.$toast.error("请选中要录入人脸的用户！");
          return;
        }
        //this.$toast.error(JSON.stringify(this.list[this.selects[0]]));
        this.go('/addFace',{userInfo:this.list[this.selects[0]]});
      },
      
      // 添加用户
      addUser: function(){
          this.go('/addUser')

      },
      // 删除用户
      deleteUser: function(){
        if(this.selects.length==0)
        {
          this.$toast.error("请选中要删除的用户！");
          return;
        }else if(this.selects.length > 1){
          this.$toast.error("每次只能选中一个用户！ ");
          return;
        }else{
          var UserId  = this.list[this.selects].UserId;
          var RoleId = this.$parent.currentInfo.RoleId;
          var Account = this.list[this.selects].Account;
          if(RoleId == 'b0c86811-ec53-4d7e-bd81-84f146e43dce'){
            this.$toast.error("抱歉, 您暂时没有权限删除用户");
            return
          }
          if(Account=="admin")
          {
            this.$toast.error("系统账户，不能删除！");
            return
          }
          if(UserId == this.$parent.currentInfo.UserId){
            this.$toast.error("抱歉, 您不能删除自己！");
            return
          }else{
            this.layer_index = layer.confirm('确定要删除该用户？', {
            btn: ['确定','取消'], skin: 'layer-custom', title: '提示' //按钮
                      }, function(){
                        layer.closeAll('dialog');
                        P_User.deleteUser(UserId)

                      }, function(){
                        return
                      });
            }

        }
      },

      // 删除用户回调函数
      deleteUserCallback(obj){
        if(obj.status == '0'){
          this.$toast.info('删除成功')
          P_User.getUserList(this.$parent.currentInfo.CustomerId,this.current, this.pageSize);
        } else{
            this.$toast.error(obj.message)
        } 

      },
      getUserListCallback: function (obj) {
        layer.close(this.layerIndex);
        this.totalCount = obj.data.totalCount;
        if (obj.status != 0) {
          this.$toast.error(obj.message);
        } else {
          this.list = obj.data.jsonData;
          for (var i = 0; i <this.list.length; i++){
            　if(this.list[i].Account=="admin")
              {
                this.list.splice(i,1);
                break;
              }
          }
        }
      },
      formatSqlTime(params){
        return params.replace('T', ' ')
      },

    },
    mounted: function () {
      this.userListPageChange();
      P_Client.closeVideoDisplay();

    }
  };
</script>